<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:jjwm="/tld/jjwm.tld"  >

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>库存管理</title>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_hader" th:content="${_csrf.headerName}"/>
    <!--<link rel="icon" type="image/x-icon" href="/image/favicon.ico"/>-->
    <!--<link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}"/>-->
    <!--<script th:src="@{jquery/jquery-3.0.0.min.js}" ></script>-->
    <!--<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script th:src="@{/jquery/jquery.twbsPagination.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/tooltips/iziToast.css}"/>

</head>
<script>
    $(function(){
        //屏幕可显示高度 - 导航栏高度 - 页脚高度
        var showHeight = $(window).height() - $("#indexNav").height() - $("#indexFooter").height() - 20;
        //$("#indexContainer").height(showHeight);
        initMenu("indexNav","");

        iziToast.settings({
            timeout: 3000,
            // position: 'center',
            // imageWidth: 50,
            pauseOnHover: true,
            // resetOnHover: true,
            close: true,
            progressBar: true,
            // layout: 1,
            // balloon: true,
            // target: '.target',
            // icon: 'material-icons',
            // iconText: 'face',
            // animateInside: false,
            // transitionIn: 'flipInX',
            // transitionOut: 'flipOutX',
        });
    });

    function searchExpress(e){
        if($(e).hasClass("disabled")){
            return;
        }
        var expressNo = $("#expressNo").val();
        if(expressNo == ''){
            return;
        }
        $.ajax({
            url:"/expressQuery/showapiExpInfo?nu=" + expressNo,
            type:'GET',
            async : false,
            beforeSend : function () {
                $(e).addClass("disabled");
                $(e).html("正在查询");
            },
            success:function (data) {
                if(data.showapi_res_code == 0){
                    var result = data.showapi_res_body;
                    if(result.msg == null || result.msg == ''){
                        var mailNo = result.mailNo;
                        var expTextName = result.expTextName;
                        var expressList = result.data;
                        $("#expreddResultUl").html("");
                        var ulContent = "";
                        if(expressList.length > 0){
                            $.each(expressList,function(index,value){
                                if(index == 0){
                                    ulContent += '<li class="list-group-item" style="background-color: lightblue;"><span class="badge">新</span>'
                                     + value.time + '&nbsp;' + value.context + '</li>';
                                }else{
                                    ulContent += '<li class="list-group-item" style="background-color: lightgray;">'
                                            + value.time + '&nbsp;' + value.context + '</li>';
                                }
                            });
                        }else{
                            ulContent = '<li class="list-group-item">未查询到结果</li>';
                        }
                        $("#expreddResultUl").html(ulContent);
                        $("#expressResultModal").modal("show");
                    }else{
                        showErrorMsg(result.msg);
                    }
                }else{
                    showErrorMsg(data.showapi_res_error);
                }
                $(e).removeClass("disabled");
                $(e).html("查询");
            },
            error : function(){
                $(e).removeClass("disabled");
                $(e).html("查询");
                showErrorMsg("查询失败");
            }
        });
    }
</script>
<body>


<nav id="indexNav" class="navbar navbar-default" role="navigation" style="height: 50%;">

</nav>
<div class="container">
    <div class="row">
        <div class="col-md-9 col-sm-9 col-xs-12 form-inline">
        </div>
        <div class="col-md-3 col-sm-3 col-xs-12 form-inline">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        快递查询
                    </h3>
                </div>
                <div class="panel-body">
                    <input  type="text" class="form-control" id="expressNo" placeholder="请输入快递单号"/>
                    <button type="button" style="margin-top: 5px;float: left;" onclick="searchExpress(this);" class="btn btn-success">查询</button>
                </div>
            </div>
        </div>
    </div>
</div>


<form th:action="@{/logout}" method="post" id="logoutform" style="display: none;">
    <input type="submit" value="登出"/>
</form>
<div class="modal fade" data-backdrop="static" id="expressResultModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    查询结果
                </h4>
            </div>
            <div class="modal-body">
                <ul class="list-group" id="expreddResultUl">
                    <li class="list-group-item" style="background-color: lightgray;">免费域名注册</li>
                    <li class="list-group-item">免费 Window 空间托管</li>
                    <li class="list-group-item">图像的数量</li>
                    <li class="list-group-item">
                        <span class="badge">新</span>
                        24*7 支持
                    </li>
                    <li class="list-group-item">每年更新成本</li>
                    <li class="list-group-item">
                        <span class="badge">新</span>
                        折扣优惠
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<a style="display: none;" href="#" class="trigger-success">Success</a>
<a style="display: none;" href="#" class="trigger-error">Error</a>
<script th:src="@{/js/tooltips/iziToast.min.js}" type="text/javascript"></script>
<script th:src="@{/js/util.js}"></script>
</body>
</html>